<script lang="ts">
  import Title from "../../../components/Title/Title.svelte";
  import LightPoint from "../../../components/Point/LightPoint.svelte";
  import {onMount} from "svelte";
  import {tracks} from "../stores";
  const currentCar = tracks.currentCar
  let width
  let height
  onMount(async () => {
    await tracks.get()
  })

</script>

<div class="h-full flex flex-col">
  <Title title="AGV运行轨迹图" extra={true}/>
  <div class="flex-1 flex bg-content relative" bind:clientWidth={width} bind:clientHeight={height}>
    {#each $tracks as track}
      <LightPoint path="{track.path}" clientWidth={width} clientHeight={height} workable={$currentCar === track.id}/>
    {/each}
  </div>
</div>

<style>
  .bg-content {
    aspect-ratio: 1800/856;
    background-image: url('./agv-bg.png');
    @apply bg-center bg-no-repeat bg-contain;
  }
</style>
